<!-- 地址列表 -->
<template>
  <view class="address-wrap">
    <!-- 有上一次使用的地址就显示上一次使用的地址 -->
    <view
      class="oldAd-list"
      @click="selectAdress(oldAd)"
      v-if="JSON.stringify(oldAd) != '{}'"
    >
      <view class="top u-flex">
        <text class="name">{{ oldAd.consignee }}</text>
        <text class="phone">{{ oldAd.phone }}</text>
        <text class="tag" v-show="oldAd.is_default === '1'">默认</text>
      </view>
      <view class="detail"
        >{{ oldAd.province_name }}{{ oldAd.city_name }}{{ oldAd.area_name
        }}{{ oldAd.address }}</view
      >
      <button
        class="u-reset-button set-btn"
        @tap.stop="jump('/pages/user/address/edit', { id: oldAd.id })"
      >
        编辑
      </button>
      <view class="del" @click.stop="deleteAddress(oldAd)">删除</view>
    </view>

    <view
      class="address-list"
      v-for="(address, index) in addressList"
      :key="address.id"
      @click="selectAdress(address)"
    >
      <view class="top u-flex">
        <text class="name">{{ address.consignee }}</text>
        <text class="phone">{{ address.phone }}</text>
        <text class="tag" v-show="address.is_default === '1'">默认</text>
      </view>
      <view class="detail"
        >{{ address.province_name }}{{ address.city_name }}{{ address.area_name
        }}{{ address.address }}</view
      >
      <button
        class="u-reset-button set-btn"
        @tap.stop="jump('/pages/user/address/edit', { id: address.id })"
      >
        编辑
      </button>
      <view class="del" @click.stop="deleteAddress(address)">删除</view>
    </view>
    <shopro-empty
      v-if="isEmpty"
      :image="
        $IMG_URL + '/uploads/20230527/25f9f9c6eebf1c487596d9d28c339be1.png'
      "
      tipText="暂无默认地址，快添加一个吧~"
    ></shopro-empty>
    <view class="foot_box-wrap safe-area-inset-bottom">
      <view class="foot_box u-flex u-row-between safe-area-inset-bottom">
        <!-- 微信小程序和微信H5 -->
        <button
          class="u-reset-button sync-wxaddress u-m-20 u-flex u-row-center u-col-center"
          @tap="getWXaddress"
          v-show="
            platform == 'wxMiniProgram' || platform == 'wxOfficialAccount'
          "
        >
          <text
            class="u-iconfont uicon-weixin-fill u-p-r-10"
            style="color: #09bb07; font-size: 40rpx"
          ></text>

          导入微信地址
        </button>
        <button
          class="u-reset-button add-btn u-m-20"
          @tap="jump('/pages/user/address/edit')"
        >
          添加新地址
        </button>
      </view>
    </view>
    <u-modal
      v-model="showDel"
      content="删除该地址后不可恢复，请确认是否删除该地址"
      title="温馨提示"
      show-cancel-button="true"
      confirm-text="确认"
      cancel-text="取消"
      cancel-color="#FBECE9"
      width="690"
      :title-style="titleStyle"
      :content-style="contentStyle"
      :cancel-style="quxiaoStyle"
      :confirm-style="yesStyle"
      @confirm="toconfirm()"
      class="modal_box"
    ></u-modal>
  </view>
</template>

<script>
import Auth from '@/shopro/permission/index.js';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  components: {},
  data() {
    return {
      addressList: [],
      platform: this.$platform.get(),
      selectAd: false,
      showDel: false,
      titleStyle: {
        fontSize: '30rpx',
        fontFamily: 'PingFang SC-Heavy, PingFang SC',
        fontWeight: 700,
        color: '#3D3D3D',
      },
      contentStyle: {
        fontSize: '24rpx',
        fontFamily: 'PingFang SC-Medium, PingFang SC',
        fontWeight: 400,
        color: '#3D3D3D',
        lineHeight: '34rpx',
        paddingLeft: '126rpx',
        width: '650rpx',
      },
      quxiaoStyle: {
        width: '290rpx',
        height: '80rpx',
        borderRadius: '40rpx',
        opacity: 1,
        border: '2rpx solid #F2F2F2',
        textAlign: 'center',
        lineHeight: '80rpx',
        color: '#979797',
        margin: '20rpx',
      },
      yesStyle: {
        width: '290rpx',
        height: '80rpx',
        borderRadius: '40rpx',
        opacity: 1,
        border: '2rpx solid #F2F2F2',
        textAlign: 'center',
        lineHeight: '80rpx',
        color: '#fff',
        background: 'linear-gradient(212deg, #6AC6FF 0%, #A084F0 100%)',
        margin: '20rpx',
      },
      delAddress: {},
      //上次使用的地址
      oldAd: {},
      isEmpty: false,
    };
  },
  computed: {},
  onLoad() {},
  onShow() {
    //获取地址列表
    this.getAddressList();
    //判断是否从发货界面跳转过来的，如果是的话地址就是可以通过点击选择并跳转回发货界面
    if (this.$Route.query.selectAd) {
      this.selectAd = this.$Route.query.selectAd;
    }
    //获取上一次使用过的地址
    this.getLastAddress();
  },
  methods: {
    // 获取上一次使用过的地址,请求接口获取最新修改过后的地址并保存到本地存储
    getLastAddress() {
      this.oldAd = uni.getStorageSync('addressKey') || {};
      if (Object.keys(this.oldAd).length != 0) {
        this.$http('address.info', {
          id: this.oldAd.id,
        }).then((res) => {
          if (res.code === 1) {
            if (res.data) {
              this.oldAd = res.data;
            } else {
              this.oldAd = {};
            }
            uni.setStorageSync('addressKey', this.oldAd);
          }
        });
      }
    },

    // 选中
    useAddress(addressData) {
      uni.$emit('SELECT_ADDRESS', { addressData: JSON.stringify(addressData) });
      uni.navigateBack();
    },
    // 路由跳转
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas,
      });
    },
    // 微信导入
    getWXaddress() {
      let authState = new Auth('address').check();
      // #ifdef MP
      authState &&
        uni.chooseAddress({
          success: (res) => {
            this.jump('/pages/user/address/edit', { addressData: res });
          },
          fail: (err) => {
            console.log(
              '%cuni.chooseAddress,调用失败',
              'color:green;background:yellow'
            );
          },
        });
      // #endif
      // #ifdef H5
      this.$wxsdk.openAddress((res) => {
        this.jump('/pages/user/address/edit', { addressData: res });
      });
      // #endif
    },
    getAddressList() {
      this.$http('address.list').then((res) => {
        if (res.code === 1) {
          this.addressList = res.data;
          this.isEmpty = this.addressList.length == 0 ? true : false;
          !this.addressList.length &&
            uni.$emit('SELECT_ADDRESS', { addressData: null });
        }
      });
    },
    // 删除收货地址
    deleteAddress(address) {
      this.showDel = true;
      this.delAddress = address;
    },
    toconfirm() {
      const that = this;
      that
        .$http(
          'address.del',
          {
            id: this.delAddress.id,
          },
          '删除中...'
        )
        .then((res) => {
          //如果删除的地址是上一次使用的地址，先将本地存储删除
          if (this.delAddress.id == uni.getStorageSync('addressKey').id) {
            uni.setStorageSync('addressKey', {});
          } else {
          }
          this.getAddressList();
          this.oldAd = uni.getStorageSync('addressKey') || {};
        });
    },
    // 发货页面跳转进来时可以选择地址
    selectAdress(address) {
      if (this.selectAd == 'true') {
        uni.setStorageSync('addressKey', address);
        uni.navigateBack({
          delta: 1,
        });
        this.selectAd = false;
      }
    },
  },
};
</script>

<style lang="scss">
.address-wrap {
  overflow: hidden;
}
.address-list {
  padding: 40rpx;
  position: relative;
  background: #fff;
  border-bottom: 1rpx solid rgba(216, 216, 216, 0.6);

  .name {
    font-size: 30rpx;
    font-weight: 600;
  }

  .phone {
    font-size: 30rpx;
    margin: 0 20rpx;
  }

  .tag {
    background: #a084f0;
    border-radius: 6rpx;
    padding: 0 16rpx;
    line-height: 38rpx;
    color: #fff;
    font-size: 22rpx;
  }

  .detail {
    margin-top: 25rpx;
    width: 543rpx;
    font-size: 26rpx;

    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 40rpx;
  }

  .set-btn {
    background: none;
    position: absolute;
    font-size: 26rpx;
    color: #a084f0;
    top: 40rpx;
    right: 40rpx;
  }
  .del {
    font-size: 20rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #8c8c8c;
    float: right;
  }
}
.oldAd-list {
  padding: 40rpx;
  position: relative;
  background: #fff;
  margin-bottom: 20rpx;
  background-image: url(../images/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left bottom;
  .name {
    font-size: 30rpx;
    font-weight: 600;
  }

  .phone {
    font-size: 30rpx;
    margin: 0 20rpx;
  }

  .tag {
    background: #a084f0;
    border-radius: 6rpx;
    padding: 0 16rpx;
    line-height: 38rpx;
    color: #fff;
    font-size: 22rpx;
  }

  .detail {
    margin-top: 25rpx;
    width: 543rpx;
    font-size: 26rpx;

    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 40rpx;
  }

  .set-btn {
    background: none;
    position: absolute;
    font-size: 26rpx;
    color: #a084f0;
    top: 40rpx;
    right: 40rpx;
  }
  .del {
    font-size: 20rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #8c8c8c;
    float: right;
  }
}

// 底部按钮
.foot_box-wrap {
  height: 140rpx;
  width: 100%;
}
.foot_box {
  padding: 10rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1rpx solid rgba(#ccc, 0.2);
  .sync-wxaddress {
    flex: 1;
    line-height: 80rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 40rpx;
    box-shadow: 0 0 1rpx 6rpx rgba(#ccc, 0.2);
  }
  .add-btn {
    line-height: 80rpx;
    flex: 1;
    background: #a084f0;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
.modal_box {
  /deep/ .u-border-top:after {
    border-top: none;
  }
}
</style>
